<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>信息换页</title>
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        .table {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <table class="table table-bordered table-striped">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr class="text-center">
            <td>1</td>
            <td>tom</td>
            <td>10</td>
        </tr>
        <tr class="text-center">
            <td>1</td>
            <td>tom</td>
            <td>10</td>
        </tr>
        <tr class="text-center">
            <td>1</td>
            <td>tom</td>
            <td>10</td>
        </tr>
    </table>
    <ul class="pagination">
        <li><a href="#"><span>&laquo;</span></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#"><span>&raquo;</span></a></li>
    </ul>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    let arr = [];
    let queryInfo = {
        pageNum: 1,
        pageSize: 9,
        total: 0,
        totalPage: 0
    };

    function init() {
        for (let i = 0; i < 100; i++) {
            let person = {};
            person.id = i + 1;
            person.name = 'tom' + (i + 1);
            person.age = Math.floor(Math.random() * (25 - 18 + 1)) + 18;
            arr.push(person);
        }
    }

    function initPagination() {
        let pagination = $('.pagination');
        pagination.empty();
        pagination.append(`<li id="first"><a href="#"><span>&laquo;</span></a></li>`);
        for (let i = 0; i < queryInfo.totalPage; i++) {
            pagination.append(`<li class="item"><a href="#">${i + 1}</a></li>`);
        }
        pagination.append(`<li id="last"><a href="#"><span>&raquo;</span></a></li>`);
    }

    function initTable() {
        let start = (Number(queryInfo.pageNum) - 1) * Number(queryInfo.pageSize);
        let end = Number(start) + Number(queryInfo.pageSize);
        let list = [];
        for (let i = start; i < end; i++) {
            if (arr[i]) {
                list.push(arr[i]);
            }
        }
        console.log(list);
        let table = $('.table');
        table.empty();
        let tbody = $('<tbody></tbody>');
        tbody.append(`<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>`);
        for (let i = 0; i < list.length; i++) {
            tbody.append(`
          <tr class="text-center">
            <td>${list[i].id}</td>
            <td>${list[i].name}</td>
            <td>${list[i].age}</td>
          </tr>`);
        }
        table.append(tbody);
    }

    function prevPage() {
        let num = parseInt(queryInfo.pageNum);
        num--;
        if (num <= 1) {
            queryInfo.pageNum = 1;
        } else {
            queryInfo.pageNum = num;
        }
        initTable()
    }

    function nextPage() {
        let num = parseInt(queryInfo.pageNum);
        ++num;
        if (num >= queryInfo.totalPage) {
            num = queryInfo.totalPage;
        }
        queryInfo.pageNum = num;
        initTable()
    }

    $(function() {
        init();
        queryInfo.total = arr.length;
        queryInfo.totalPage = Math.ceil(queryInfo.total / queryInfo.pageSize);
        initPagination();
        initTable();
        $('.item').click(function() {
            queryInfo.pageNum = Number($(this).find('a').text());
            initTable();
        });
        $('#first').click(function() {
            prevPage();
        });
        $('#last').click(function() {
            nextPage();
        });
    });
</script>
</body>
</html>

